<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
<style type="text/css">

	.myActive{
		font-size:18px;
		color:red;
	}


</style>
</head>
<body>







<div id="app">
    	

 <!--  	 <a href="#/login">login</a>
  	 <a href="#/register">register</a> -->	


  	<router-link to="/login">前往登录</router-link>
  	<router-link to="/register">前往注册</router-link>

  	<router-view></router-view>

  
</div>










<br>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script type="text/javascript">

var login = {
	template:'<h1>这是登录子组件</h1>'
}

var register = {
	template:'<h1>注册子组件的内容</h1>'
}

var router = new VueRouter({
	routes:[
		{path:'/',redirect:'/login'},
		{path:'/login',component:login},
		{path:'/register',component:register}
	],
	linkActiveClass:'myActive'

})





var  vm= new Vue({
  el: '#app',

  data: {
  	 
  },

  methods:{

  },

  router

})





</script>

	
</body>
</html>